<template>
    <div>
        <div class="serchHeader">
            <el-input v-model="cateKeyWords" class="cateSerchBtn" size="mini" placeholder="请输入栏目名称搜索..."></el-input>
            <el-button icon="fa fa-search" size="mini" type="primary" @click="serchCategory"> 搜索栏目</el-button>
            <el-button icon="fa fa-plus-circle" size="mini" type="primary" @click="showDialogOfAdd"> 添加栏目</el-button>
        </div>
        <div>
            <el-table :data="categoryData"  @selection-change="selectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="编号"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        prop="createTime">
                </el-table-column>
                <el-table-column
                        label="栏目名称"
                        prop="cateName">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
<!--        分页-->
        <div style="margin: 10px 0;">
            <el-pagination
                    @current-change="currentChange"
                    background
                    :current-page="pageNum"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </div>
        <el-button size="mini" type="danger" :disabled="multiBtnDisable" @Click="multiDeleteCategory">批量删除</el-button>
<!--        新增栏目-->
        <div>
            <el-dialog
                    title="新增栏目"
                    :visible.sync="dialogVisibleOfAdd"
                    width="30%">
                <el-input v-model="addCategory.cateName" class="dialogInput" size="mini" placeholder="请输入添加栏目名称"></el-input>
                <span slot="footer" class="dialog-footer">
            <el-button size="mini">取 消</el-button>
            <el-button type="primary" @click="submitAdd" size="mini">确 定</el-button>
            </span>
            </el-dialog>
        </div>
<!--        编辑栏目-->
        <div>
            <el-dialog
                    title="编辑栏目"
                    :visible.sync="dialogEditVisible"
                    width="30%">
                <el-form >
                    <el-form-item label="栏目名称" >
                        <el-input v-model="editCategory.cateName"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button >取 消</el-button>
                    <el-button type="primary" @click="saveEdit" >确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CategoryManage",
        data() {
            return {

                editCategory:{
                    id:'',
                    cateName:'',
                },

                multiBtnDisable:true,
                addCategory:{
                  cateName:''
                },
                total : 0,
                pageNum: 1,
                pageSize : 5,
                categoryData :[],
                cateKeyWords : '',
                dialogVisibleOfAdd:false,
                dialogEditVisible:false,
            }
        },

        methods :{
            saveEdit(){
                console.log(this.editCategory);
                this.$putRequest("/category/updateName",this.editCategory).then(resp=>{
                    if (resp){
                        this. initCategory();
                    }
                })
            },

            handleEdit(row){
                this.dialogEditVisible=true;
                this.editCategory.id = row.id;
                this. editCategory.cateName=row.cateName;

            },

            multiDeleteCategory(){
                this.$confirm('此操作将永久删除【'+this.readyDeleteCate.length+'】项栏目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let delIds = '?';
                    this.readyDeleteCate.forEach((item,i) => {
                        delIds += 'ids=' + item.id + '&';
                    })
                    this.$deleteRequest('/category/mulDeleteCategory'+delIds).then(resp => {
                        if (resp) {
                            this.pageNum = 1;
                            this.initCategory();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },

            selectionChange(selection) {
                this.multiBtnDisable = selection.length == 0 ? true : false;
                this.readyDeleteCate = selection;
            },

            handleDelete(row){
                console.log(row);
                this.$confirm('是否确认删除, 是否继续?', '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$deleteRequest("/category/deleteCategory/"+row.id).then(resp => {
                        if (resp) {
                            this.pageNum=1;
                            this.initCategory();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            submitAdd(){
                if (this.addCategory.cateName.trim() !=''){
                    this.$postRequest('/category/addCategory',this.addCategory).then(resp=>{
                        if (resp){
                            this.dialogVisibleOfAdd=false;
                            this.addCategory.cateName="";
                            this.pageNum=1;
                            this.cateKeyWords="";
                            this.initCategory();
                        }
                    })
                }else {
                    this.$message.warning("请填写栏目名称");

                }
            },

            showDialogOfAdd(){
                this.dialogVisibleOfAdd=true;
            },
            // 点击搜索栏目
            serchCategory() {
                this.pageNum = 1;
                this.initCategory();
            },
            // 点击分页按钮回调
            currentChange(pageNum) {
                this.pageNum = pageNum;
                this.initCategory();
            },
            // 查询栏目
            initCategory() {
                this.$getRequest('/category/getCategory?pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&serchKeyWord='+this.cateKeyWords).then(resp => {
                    if (resp) {
                        this.categoryData = resp.list;
                        this.total = resp.total;
                    }
                })
            }
        },
        mounted(){
            this.initCategory();
        },
    }
</script>

<style scoped>
    .serchHeader {
        margin: 10px 0;
    }
    .cateSerchBtn{
        width: 400px;
        margin-right: 10px;
    }
</style>